<template>
 <div class="profile">
   <div class="profile-left">
   <!-- 微博列表 -->
    <div class="profile-title">个人空间</div>
    <div v-if="blogData.isEmpty">暂无数据</div>
    <blog-list v-else :list="blogListData" :count="blogData.count"></blog-list>
    <!-- 加载更多 -->
    <load-more v-if="isLoadMore" @click.native="getMoreBlog"></load-more>
  </div>
  <div class="profile-right">
    <!-- 用户信息 -->
    <user-info :userData="userData"></user-info>
    <!-- 粉丝 -->
    <user-list  :list="fansData.userList">粉丝({{ fansData.count }})</user-list>
    <!-- 关注 -->
    <user-list :list="followerData.userList">关注({{ followerData.count }})</user-list>
  </div>
 </div>
</template>
<script>
import BlogList from 'components/common/BlogList'
import LoadMore from 'components/common/LoadMore'
import userInfo from 'components/common/userInfo'
import userList from 'components/common/userList'

import {
  loadMoreBlog
} from 'api/blog'
import {
  getProfileInfo
} from 'api/profile'

export default {
  name: 'profile',
  data () {
    return {
      id: 0,
      index: 0,
      blogData: {},
      blogListData: [],
      userData: {},
      fansData: {},
      followerData: {}
    }
  },
  components: {
    BlogList,
    LoadMore,
    userInfo,
    userList
  },
  computed: {
    // 是否显示加载更多
    isLoadMore () {
      if (this.blogListData) {
        return this.blogData.count > this.blogListData.length
      }
      return false
    }
  },
  methods: {
    /**
     * 获取第一页博客数据
     * @methods getBlogListData
     */
    async getProfile () {
      this.index = 0
      let routerName = this.$route.name
      let id = this.$route.params.id
      // 如果不是指定id，默认获取当前登录用户的id
      if (!id) {
        id = 'currentId'
      }
      let result = await getProfileInfo(id)
      // 是否是错误
      if (result.errno === 0) {
        let data = result.data
        // 博客信息
        this.blogData = data.blogData
        this.blogListData = data.blogData.blogs
        // 用户信息
        this.userData = data.userData
        this.id = data.userData.id
        // 粉丝信息
        this.fansData = data.fansData
        // 关注的人信息
        this.followerData = data.followerData
      } else {
        alert(result.message)
      }
    },
    /**
     * 获取后续的博客数据
     * @methods getMoreBlog
     */
    async getMoreBlog () {
      this.index++
      // 获取后续
      let result = await loadMoreBlog(this.id, this.index)
      // 是否获取到成功数据
      if (result.errno === 0) {
        this.blogListData.push(...result.data.blogs)
      } else {
        this.index--
        alert(result.message)
      }
    }
  },
  created () {
    this.getProfile()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'getProfile'
  }
}
</script>
<style lang="scss" scoped>
.profile{
  width: 70%;
  margin: 0 auto;
  display: flex;
  .profile-left{
    flex: 4;
    padding: 0 40px;
    .profile-title{
      font-size: 24px;
      line-height: 1.5em;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
  }
  .profile-right{
    flex: 2;
    padding: 0 10px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 600px) {
  .profile{
    width: auto;
    padding: 0 10px;
    .profile-left{
      padding: 0 10px;
    }
  }
}
</style>
